<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>parent选择器</title>
		<style>
		
			table{
				width: 600px;
				height: 300px;
				/*折叠 收缩 去掉表框的重复*/
				border-collapse: collapse;
			}
			
			td{
				border: 1px solid red;
				text-align: center;
				font-weight: bold;
				font-family: "微软雅黑";
				width: 200px;
			}
			
			input[type=button]{
				margin-left: 100px;
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: center;
				display: block;
				cursor: pointer;
				font-size: 12px;
				width: 300px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
			.b{
				background-color: #ef5b00;
				color: white;
			}
		</style>
	</head>
	<body>
		
		<table>
			<tr>
				<td>1</td>
				<td>22</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td><span>5</span></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td><label></label></td>
			</tr>
		</table>
		
		<br>
		
		<input type="button" onclick="search();" value="==td:parent==" />
	</body>
	
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
	
		//找有资格做父亲的td
		function search(){
			var elements = $("td:parent");
			console.log(elements.length);
			
			elements.each(function(index,object){
				object.setAttribute("class","b");
				//console.log(object.innerHTML);
				//显示里面到底是什么
				//this.textContent =this.innerHTML;
			});
		}
	</script>
</html>

<!--
	作者：offline
	时间：2016-05-26
	描述：parent选择器语法总结
	
	1：parent后面有括号
	2：前面记得有:
	3: 匹配含有子元素或者文本的元素
	4: 匹配含有子元素或者文本的元素 里面含有文本或者含有子元素。注意子元素中可以没有任何东西也算。

-->
